<!--文字资料-->
<template>
  <div>
    <a-card class="contentFullHeight"  :bodyStyle="{padding : '10px 10px'}">
      <!--筛选、导入导出-->
      <a-card :bordered="true" class="searchBox" :bodyStyle="{padding : '10px 24px'}">
        <a-form layout="inline">
          <a-form-item label="资料名称">
              <a-input v-model="searchParams.charName"/>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" icon="search" @click="handleSearch">查询</a-button>
          </a-form-item>

          <!--<a-form-item>-->
            <!--<a-button type="primary" icon="file" :loading="downloadLoading">导入</a-button>-->
          <!--</a-form-item>-->
          <!--<a-form-item>-->
            <!--<a-button type="primary" icon="download" @click="handleDownload" :loading="downloadLoading">导出</a-button>-->
          <!--</a-form-item>-->
          <a-form-item>
            <!--新增-->
            <a-button type="primary" icon="plus" @click="handleCreate">新增</a-button>
          </a-form-item>
        </a-form>
      </a-card>

      <!--列表-->
      <a-table :columns="columns" :dataSource="data"
               bordered size="small" rowKey="id"
               :pagination="pagination" :loading="loading"
               @change="getTableData"
      >
        <template slot="type" slot-scope="text,record">
          <a-tag color="green" v-if="text == '0'">
            上架
          </a-tag>
          <a-tag color="red" v-if="text == '1'">
            下架
          </a-tag>
        </template>
        <span slot="action" slot-scope="text, record">
          <template>
            <a v-if="record.type == 0" href="javascript:;" @click="updateForType(record.id,1)">下架</a>
             <a v-else href="javascript:;" @click="updateForType(record.id,0)">上架</a>
            <a-divider type="vertical"/>
            <a @click="handleUpdate(record)" href="javascript:;">编辑</a>
            <a-divider type="vertical"/>
            <a href="javascript:;" @click="showConfirm(record)">删除</a>
          </template>
        </span>
      </a-table>
      <!--新增/编辑弹窗-->
      <WrittenPopup :mdl="mdl" @handleSearch="handleSearch"></WrittenPopup>
    </a-card>
  </div>
</template>

<script>
  import moment from 'moment';
  import WrittenPopup from './writtenPopup'
  import {studycharquery,studychardelete,studycharupdateForType} from '@/api/invoice'
  export default {
    components: {
      WrittenPopup
    },
    data() {
      return {
        /*   -------搜索框--------*/
        searchParams: {
          charName: '',
        },
        /*   -------分页--------*/
        pagination: this.$defaultSettings.pagination ,
        /*   -------弹窗--------*/
        mdl: {
          dialogStatus: '',
          dialogTitleMap: {
            update: '编辑',
            create: '添加'
          },
          visible: false,
          title: '',
          formData: {
            "charIntegral": 1,
            "charName": "",
            "docName": "",
            "id": '',
            "infoId": '',
            "pageRank": '',
            "pageViews": '',
            "type": '',
            "uploadTime": "",
            charInfo: '',
            period:1
          },
          labelCol: {
            xs: {
              span: 24
            }
            ,
            sm: {
              span: 5
            }
          }
          ,
          wrapperCol: {
            xs: {
              span: 24
            }
            ,
            sm: {
              span: 16
            }
          },
          formItemLayoutWithOutLabel: {
            wrapperCol: {
              xs: { span: 24, offset: 0 },
              sm: { span: 20, offset: 4 },
            },
          },
        },


        /*   -------表格--------*/
        loading: false,
        columns:[
          {
            title: '资料名称',
            dataIndex: 'charName'
          },
          {
            title: '相关资料',
            dataIndex: 'docName',
          },
          {
            title: '上传时间',
            dataIndex: 'uploadTime',
          },
          {
            title: '浏览量',
            dataIndex: 'pageViews'
          },
          {
            title: '积分',
            dataIndex: 'charIntegral'
          },
          {
            title: '学时',
            dataIndex: 'period'
          },
          {
            title: '上下架状态',
            dataIndex: 'type',
            scopedSlots: {customRender: 'type'}
          },
          {
            title: '操作',
            dataIndex: 'action',
            width: '150px',
            scopedSlots: {customRender: 'action'}
          }
        ],
        data:[],

        // 下载
        downloadLoading: false,
      }
    },
    inject: ['upShow'],
    filters: {

    },
    created() {
      this.getTableData(this.pagination)
    },
    computed: {

    },
    methods: {
      moment,
      getTableData(pagination) {
        if(pagination!=undefined && pagination!='' && pagination!=null) {
          this.pagination = pagination
        }
        this.loading = true
        const parameter = {
          _search: true,//是否分页查询
          pageSize: this.pagination.pageSize || 10,
          pageNumber: this.pagination.current || 1,
          "data": {
            "charIntegral": "",
            "charName": this.searchParams.charName,
            "docName": '',
            "id": '',
            "infoId": '',
            "pageRank":"",
            "pageViews": "",
            "type": "",
            "uploadTime": "",
            charInfo: ''
          },
        }
        studycharquery(parameter).then(res => {
          this.loading = false
          this.pagination.total = res.data.total
          this.data = res.data.records
        }).
        catch(err => {
          this.loading = false
        })
      },
//      筛选
      handleSearch() {
        this.pagination.current = 1
        this.getTableData()
      },
//      新增时清空数据
      setDefaults() {
        this.mdl.formData = {
          "charIntegral": 1,
          "charName": '',
          "docName": '',
          "id": '',
          "infoId": '',
          "pageRank":"",
          "pageViews": "",
          "type": "",
          "uploadTime": "",
          charInfo: '',
          period:1
        }
      },
      //添加行
      handleCreate() {
        this.setDefaults()
        this.mdl.dialogStatus = 'create'
        this.mdl.visible = true
      },
      //编辑当前行
      handleUpdate(row) {
        this.mdl.formData = Object.assign({}, row) // copy obj
        this.mdl.dialogStatus = 'update'
        this.mdl.visible = true
      },
//删除
      showConfirm(val) {
        var that = this
        this.$confirm({
          title: '删除文字资料?',
          content: '确定删除'+val.charName,
          onOk() {
            that.handleDelete(val)
          },
          onCancel() {},
        });
      },
      handleDelete(row) {
        studychardelete(row.infoId).then(res => {
          if(res.code === 200) {
            this.upShow(1,res.msg || '删除成功')
            this.handleSearch()
          } else {
            this.upShow(2,res.msg)
          }
        }).catch(err => {
          this.upShow(2)
        })
      },
      //下载
      handleDownload() {
        this.downloadLoading = true
        let param  ={

        }
//        refundRecorDdown(param).then(res=> {
//          downloadFile(res,"退款记录","xlsx")
//          this.downloadLoading = false
//        })
      },
//      上下架
      updateForType(id,type) {
        let parameter= {
            id: id,
          type: type//        0:去下架;1:去上架
        }
        studycharupdateForType(parameter).then(res => {
          if(res.code === 200) {
            this.upShow(1,res.msg || '操作成功')
            this.handleSearch()
          } else {
            this.upShow(2,res.msg)
          }
        }).catch(err => {
          this.upShow(2)
        })
      }
    }
  }
</script>

<style scoped>

</style>